<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <link rel="stylesheet" href="/static/css/app/pay/recharge.css">
    <script src="/static/js/app/pay/flexible.js"></script>
    <title>花开充值</title>
    <script src="/static/js/app/pay/jquery.min.js"></script>
    <script src="/static/js/app/pay/init.js"></script>
    <script src="/static/js/app/pay/util.js"></script>
    <script src="/static/js/app/pay/fastclick.js"></script>
    <script>
        $(function() {
            FastClick.attach(document.body);
        });
    </script>
    <style>
        iframe:not(.huakai_iframe) {display:none !important;}
        li,#sure,#change{ -webkit-tap-highlight-color:transparent;}
        html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        /* 新增*/
        .loader {
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            border: 0.1rem solid #ddd;
            border-top: 0.1rem solid #42a5f5;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            position: absolute;
            top:40%;
            left: 50%;
            margin-left: -0.75rem;
        }

        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        .loader-con {
            margin: 0 auto;
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            /*background: rgba(0,0,0,0.4);*/
        }
        .loader-con>p{
            text-align: center;
            position: absolute;
            width: 6rem;
            top:48%;
            left: 50%;
            margin-left: -3rem;
            font-size: 0.4rem;
            color: #120411;
        }
        .hide{display: none}
        * { touch-action: none; }
    </style>

</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
<div id="pay_result"></div>
<div class="contain">
    <div class="top">
        <div class="top-number">
            <input type="text" id="custormId" placeholder="请输入您要充值的花开号">
            <span id="sure">确认</span>
        </div>
        <div class="top-NumInfo hide" id="top-NumInfo" data-flag="false">
            <div class="info">
                <dl>
                    <dt><img id="photo" src="" alt=""></dt>
                    <dd>
                        <p><b>昵&nbsp;&nbsp;称：</b><i id="nickName"></i></p>
                        <p><b>花开号：</b><strong id="customerId"></strong></p>
                    </dd>
                </dl>
                <span id="change">更换花开号</span>
            </div>
            <!--<div class="ddd" style="font-size: 10px"></div>-->
            <p>看清楚自己的花开号和昵称，充错不退哦～</p>

        </div>
    </div>
    <div class="main-box">
        <ul class="tab">
            <li class="tab-zfb active" data-pay="1" >
                <img src="/static/img/app/pay/zfb.png" alt="">
                <b>支付宝支付</b>
                <span class="tuijian">推荐</span>
            </li>
            <li class="tab-weixin "  data-pay="2" >
                <img src="/static/img/app/pay/weixin.png" alt="">
                <b>微信支付</b>
            </li>
        </ul>
        <div class="tab-list">
            <ul class="list-zfb" id="tab_alipay">
            </ul>
            <ul class="list-weixin hide" id="tab_weixin">
            </ul>
        </div>
    </div>
    <div class="message hide" id="message"><span>请输入完整提现信息！</span></div>

</div>
<div class="loader-con hide">
    <div class="loader"></div>
    <p>加载中...</p>
</div>
    <script>
        // var custormId=null;
        var custormId=getParameter("x-access-id") ? getParameter("x-access-id") : 0;
        var accessToken = getParameter("x-access-token") ? getParameter("x-access-token") : '';
        var ua = getParameter("x-ua") ? getParameter("x-ua") : 'unknown';
        var version=getParameter("x-version-code") ? getParameter("x-version-code") : 0;
        var channel=getParameter("x-channel") ? getParameter("x-channel") : 'unknown';
        //$(".ddd").html(custormId+accessToken+ua+version+channel)
        $(function () {
            //    tab切换
            $(".tab").find("li").each(function () {
                $(this).click(function () {
                    var i=$(this).index();
                    var payMode=$(this).attr("data-pay");
                    $(".tab").find("li").removeClass("active");
                    $(".tab-list").find("ul").addClass("hide");
                    $(this).addClass("active");
                    $(".tab-list").find("ul").eq(i).removeClass("hide");
                });
            })
         //充值信息
            $("#sure").click(function () {
               var custormId=$("#custormId").val();
                if(custormId== ""){
                    $("#message>span").html("请输入花开号");
                    $("#message").removeClass("hide");
                    hideMsg();
                }
                if(custormId){
                    info(custormId);
                }
            });
        //跟换充值信息
            $("#change").click(function () {
                $("#custormId").val("");
                $(".top-NumInfo").addClass("hide").siblings(".top-number").removeClass("hide");
            });
            //支付宝充值列表初始化
            zfbOrWeixinList(1);
            zfbOrWeixinList(2);
            clickList("#tab_alipay");
            clickList("#tab_weixin");
        //    修改
            if(custormId){
                info(custormId);
            }
            //   调用信息
        })
        //    支付宝和微信充值列表
        function zfbOrWeixinList(payMode) {
            $.ajax({
                url: genUrl("/wallet/getCommodityList"),
                type: 'GET',
                contentType:"application/json",
                data: {"payMode":payMode,"tradePage":'recharge'},
                dataType: 'json',
                headers: {
                    "x-access-id": custormId,
                    "x-access-token": accessToken,
                    "x-ua": ua,
                    "x-version-code": version,
                    "x-channel": channel
                },
                async: false,
                success: function (res) {
                    if(res.code!=0){
                        alert(res.message);
                        return;
                    }
                    var list=res.data.list;
                    var str="";
                    for(var i=0;i<list.length;i++){
                        var str1=list[i].coinPresent>0 ? " + "+list[i].coinPresent+"花瓣": "";
                        var str2=list[i].tapechatNum>0 ? " + "+list[i].tapechatNum+"小纸条":"";
                        str+='<li data-commodityId="'+list[i].id+'" data-payMode="'+list[i].payMode+'">';
                        str+='<p><img style="position: relative;top:0.2rem;display: none" src="/static/img/app/pay/huahua.png" alt="">'+list[i].coin+'花瓣<b>'+str1+str2+'</b></p>';
                        str+='<span>￥'+list[i].price+'</span>';
                        str+='</li>';
                    }
                    if(payMode=='1'){
                        $(".list-zfb").html(str);
                    }else{
                        $(".list-weixin").html(str);
                    }
                }
            });
        }
        // 绑定支付宝充值列表点击事件
        function doPay(custormId1,commodityId,payMode) {
            if(payMode==1){
                $.ajax({
                    url: genUrl("/alipay/createOrderByH5"),
                    type: 'GET',
                    contentType: "application/json",
                    data: {"commodityId":commodityId,"tradePage":'recharge'},
                    dataType: 'json',
                    async: true,
                    headers: {
                        "x-access-id": custormId1,
                        "x-access-token": accessToken,
                        "x-ua": ua,
                        "x-version-code": version,
                        "x-channel": channel
                    },
                    success: function (obj) {
                        if(obj.code!=0){
                            alert(obj.message);
                            $(".loader-con").addClass("hide");
                            return;
                        }
                        if(ua.indexOf("android")>-1){
                            $(".loader-con").addClass("hide");
                        }
                        $("#pay_result").html(obj.data.orderInfo);
                        document.forms[0].submit();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $(".loader-con").addClass("hide");
                        console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
                    }
                });
            }else if(payMode==2){
                var params = {"commodityId":commodityId, "wxTradeType":"MWEB","tradePage":'recharge'};
//                    $.extend(params, {"mchId": "1509172881"});//新增商户号时调试用
                $.ajax({
                    url: genUrl("/wxpay/unifiedOrder"),
                    type: 'GET',
                    contentType: "application/json",
                    data: params,
                    dataType: 'json',
                    async: true,
                    headers: {
                        "x-access-id": custormId1,
                        "x-access-token": accessToken,
                        "x-ua": ua,
                        "x-version-code": version,
                        "x-channel": channel
                    },
                    success: function (obj) {
                        if(obj.code!=0){
                            alert(obj.message);
                            $(".loader-con").addClass("hide");
                            return;
                        }
                        window.location.href = obj.data.mwebUrl;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $(".loader-con").addClass("hide");
                        console.log("status:" + XMLHttpRequest.status + ", readyState:" + XMLHttpRequest.readyState + ", textSatatus:" + textStatus);
                    }
                });
            }else{
                alert("未知异常");
            }
        };
        function info(custormId) {
            $.ajax({
                url: genUrl("/web/getCustomerInfo"),
                type: 'GET',
                contentType:"application/json",
                data: {"customerId":custormId,"tradePage":'recharge'},
                dataType: 'json',
                async: false,
                success: function (res) {
                    if(res.code==0){
                        $(".top-number").addClass("hide").siblings(".top-NumInfo").removeClass("hide");
                        var nickName=res.data.info.nickName;
                        var photo=res.data.info.photo;
                        var customerId=res.data.info.customerId;
                        $("#nickName").html(nickName);
                        $("#photo").attr("src",photo);
                        $("#customerId").html(customerId);
                        $("#top-NumInfo").attr("data-flag","true");
                    }else{
                        $("#message>span").html("花开会员不存在");
                        $("#message").removeClass("hide");
                        hideMsg();
                        $("#top-NumInfo").attr("data-flag","false");
                    }
                }
            });
        }
        //    间隔2s消失
        function hideMsg(){
            setTimeout(function () {
                $("#message").addClass("hide");
            },2000);
        }
        //子代点击事件
        function clickList(ele){
            $(ele).on("click","li",function (e) {
                var cls=$("#top-NumInfo").attr("class");
                var commodityId=$(this).attr("data-commodityId");
                var payMode=$(this).attr("data-payMode");
                var custormId1=$("#customerId").html();
                if(cls.indexOf("hide")==-1){
                    $(".loader-con").removeClass("hide");
                    $(this).css("background","#eee")
                    $(this).siblings("li").css("background","none");
                    doPay(custormId1,commodityId,payMode);
                }else{
                    $("#message>span").html("请输入花开号");
                    $("#message").removeClass("hide");
                    hideMsg();
                }
            });
        }
    </script>
</body>
</html>